<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>视频详情页</title>
    <link rel="stylesheet" href="../css/video_detail.css">
    <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/play.css">
</head>

<body>

    <!-- 头部 -->
    <header id="header">
        <div class="header type_page">
            <h1><img src="../img/public/logo.png" alt=""></h1>
            <ul class="center">
                <li><a href="../index.html">首页</a></li>
                <li><a href="./online.html?type=1">同步课程</a></li>
                <li class="cur"><a href="video_detail.html" class="cur">在线练习</a></li>
                
            </ul>
            <div class="right">
                <span class="iconfont">课程 &#xeb21;</span>
                <input type="text" placeholder="搜索感兴趣的内容" id="search_input">
                <img src="../img/public/search.png" alt="" id="search">
                <div class="lr">
                    <b id="loginBtn">登录</b>
                    <span>/</span>
                    <b id="registerBtn">注册</b>
                </div>
                <div class="lr">
                    <img src='#'></img>

                    <ul>
                        <li>我是用户名</li>
                        <li><a href="./course.html">课程中心</a></li>

                        <li>订单中心</li>
                        <li>资金管理</li>
                        <li><a href="userSeting.html">个人中心</a></li>
                        <li>退出登录</li>
                    </ul>
                </div>
            </div>
    </header>



    <!-- 选项 -->
    <div id="select">
        <div class="select type_page">
            <a href="../index.html"><span>首页</span></a>
            <span class="iconfont">&#xe632;</span>
            <span>在线练习</span>
            <span class="iconfont">&#xe632;</span>
            <span>练习详情</span>
        </div>
    </div>


    <!-- 视频点击处 -->

    <div id="video_btn" class="type_page">
        <!-- 图片页面 -->
        <!-- <div class="left">
             <img src="../img/videoDetail/san.png" alt=""> 

        </div>
        视频页面 
        <div class="left1">
            <video src="../video/05_tabbar.mp4" controls poster="../img/videoDetail/san.png"></video>
        </div>
        免费试学界面 
        <div class="right">
            
                [2019年秋季] 初三数学班
            </p>
            <p>
                <span>年级科目: 初三数学</span>
                <span>课时数量: 15课时</span>
                <span>开课时间: 09月30日一12月20日</span>
                <span>有效期至: 2020年12月20日</span>
            </p>
            <p>
                <span>距报名截止仅剩</span>
                <span><b>145</b> 天 <b>23</b> 时 <b>32</b> 分 <b>45</b> 秒 </span>
            </p>
            <p>
                <span>￥199</span>
                <span class="btn">免费试学</span>
            </p>
            <p>
                <span>￥199单独购买</span>
                <span></span>
                <span>￥99拼团</span>
            </p> 
        </div> -->
        
    </div>

    <!-- 授课师资 -->
    <div id="teacher" class="type_page">
        <!--  <h3>授课师资</h3>
        <div class="clearfix">
            <span></span>
            <p>
                <span>李晓明</span>
                <span>小U课堂高级讲师</span>
            </p>
            <span></span>
            <p>多年T行业从业经验，精通常用的Web开发技术;熟悉主流的CMS、商城、论坛等PHP开源产品，具有丰富的建站及二次开发经验，多个大型ERP系统的开发实践经验;精通常用的PHP开发框架，对服务器架构及服务器日常运维等方面有一定的研究。
            </p> 

        </div> -->
    </div>

    <!-- 课程目录（默认） -->
    <div id="catalog" class="type_page">
        <p>
            <button class="cur">课程目录</button>
            <button>课程详情</button>
        </p>
        <div class="catlog">
            <div>
                <ul class="catlogUl">
                    <!-- <li>
                        <span class="iconfont">&#xeb23;</span>
                        <span>第0节: 化学的研究对象和研究方法</span>
                        <span>2020.12.10 20: 00开播</span>
                        <span>开播提醒</span>

                    </li> -->
                </ul>
            </div>
        </div>
    </div>
    <p id="btn" class="type_page">
        点击展开查看全部
    </p>














    <!-- 关于 -->

    <footer id="footer">
        <div class="footer type_page">
            <ul class="clearfix">
                <li><a href="javascript:;">首页</a> <span>|</span></li>
                <li><a href="javascript:;">关于我们</a><span>|</span></li>
                <li><a href="javascript:;">加入我们</a><span>|</span></li>
                <li><a href="javascript:;">合作专区</a><span>|</span></li>
                <li><a href="javascript:;">联系我们</a><span>|</span></li>
                <li><a href="javascript:;">开放平台</a><span>|</span></li>
                <li><a href="javascript:;">意见反馈</a><span>|</span></li>
                <li><a href="javascript:;">漏洞提交</a><span>|</span></li>
                <li><a href="javascript:;">隐私政策</a><span>|</span></li>
                <li><a href="javascript:;">版权声明</a><span>|</span></li>
                <li><a href="javascript:;">反盗链声明</a><span>|</span></li>
                <li><a href="javascript:;">网上有害信息举报</a><span>|</span></li>
                <li><a href="javascript:;">备案公示</a><span>|</span></li>
                <li><a href="javascript:;">营业执照</a><span>|</span></li>
                <li><a href="javascript:;">教师资格证公示</a></li>

            </ul>
            <p>京CP备 1303088号 Coyright &copy; 2014-2019 行者信息科技 (北京) 有限公司 │ 地址: 北京市新华区马当路388号C座 │ 电话:010-66666666 │ 京公网安备
                O1010102002533号</p>
            <p>京网文(2018) 4086-308号 │ 网络文化经营许可证: 沪网文 20184086-308号 | 增值电信业务经营许可证: 京B2-20150021 │ 食品经营许可证: JY131014008888
            </p>
            <p>医疗器械经营许可证: 京嘉食药监械经营许20188008号 │ 互联网药品信息服务资格证书: (京) -经营性-2018-0011</p>
        </div>
    </footer>



    <!-- 模态窗口 -->
    <div id="layer"></div>

    <!-- 登录 -->
    <form id="login">

        <h1>
            <img src="../img/public/logo.png" alt="">
        </h1>
        <p>
            <span></span>
            <b>使用手机号登录</b>
            <span></span>
        </p>
        <p> <input type="text" placeholder="请输入您的手机号" name="tel" id="logTel"></p>

        <p><input type="password" placeholder="请输入密码" name="pas" id="logPas"></p>
        <p class="err">您输入的账号或者密码不正确</p>
        <p><input type="submit" value="登录" name="sub" id="loginbtn"></p>

        <p>
            <a href="javascript:;">忘记密码？</a>
            <span>还没有账号？ <a href="javascript:;" class="regi">点击注册</a></span>
        </p>
        <p>
            <span></span>
            <b>使用第三方软件登录</b>
            <span></span>
        </p>
        <p>
            <img src="../img/login/wx.png" alt="">
            <img src="../img/login/qq.png" alt="">
            <img src="../img/login/sina.png" alt="">
        </p>
        <span class="close">X</span>
    </form>

    <!-- 注册 -->
    <form id="register">

        <h1>
            <img src="../img/public/logo.png" alt="">
        </h1>
        <p>
            <span></span>
            <b>使用手机号登录</b>
            <span></span>
        </p>
        <p> <input type="text" placeholder="请输入您的手机号" name='tel' id="regTel">
            <br><em class="err">手机号格式错误,请重新输入！</em>
        </p>

        <p><input type="password" placeholder="请输入密码" name='pas' id="regPas">
            <br><em class="err">密码号格式错误,请重新输入！</em>
        </p>
        <p><input type="password" placeholder="请再次输入密码" name='pas1' id="regPas1">
            <br><em class="err">密码两次输入不同,请验证~</em>
        </p>
        <p>
            <input type="text" placeholder="请输入验证码" name='yz'>
            <img src="../img/register/code.jpg" alt="">
            <em class="err">验证码输入不正确</em>
        </p>

        <p><input type="button" value="注册" name="regi" id="regi"></p>

        <p>
            <input type="checkbox" name="check">
            <span>我同意</span>
            <a href="javascript:;">《用户使用协议》</a>
            <span>已有账号<a href="javascript:;" class="log">去登录</a></span>
        </p>


        <span class="close">X</span>
    </form>
    <!-- 固定定位（返回顶部） -->
    <div id="return_top">
        <a href="./course.html"><img src="../img/index/mylesson.png" alt=""></a>
         <img src="../img/index/mytest.png" alt="">
         <img src="../img/index/gotop.png" alt="">
     </div>
 
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>


    <script src="../js/common.js"></script>
    <script src="../js/public.js"></script>
    <script src="../js/videoDetaildata.js"></script>
    <script src="../js/videoPlayData.js"></script>
    <script src="../js/video_detail.js"></script>
    <script src="../layer/layer.js"></script>
</body>
<script>
    let cid = getSearchArg('cid') || '';
    if (!cid) {
        alert('请选择课程后重新进入')
        // layer.open({
        //     title: '温馨提示',
        //     content: '请选择课程后重新进入',
        // });
        history.back();

    }
    window.onload = async function () {
        
        //根据cid调用获取课程
        let result = await sendAjax({
            url: '/v1/list/coursedetail?cid=' + cid
        });
        console.log(result);
        if (result.code == 200) {
            let str = `
                <!-- 图片页面 -->
        <div class="left">
            <img src="${"/uploads/course/"+result.data.image_src}" alt=""> 

        </div>
        <!-- 免费试学界面 -->
        <div class="right">
            <p>
                ${result.data.title}
            </p>
            <p>
                <span>年级科目: ${result.data.subject_name}</span>
                <span>课时数量: 15课时</span>
                <span>开课时间:<br> ${result.data.courseIntro}</span>
                <span>有效期至: 2021年12月20日</span>
            </p>
            <p>
                <span>距报名截止仅剩</span>
                <span><b>145</b> 天 <b>23</b> 时 <b>32</b> 分 <b>45</b> 秒 </span>
            </p>
            <p>
                <span>￥${result.data.price}</span>
                <span class="btn" onclick='baoming()'>免费试学</span>
            </p>
            <p>
                <span>￥${result.data.price}单独购买</span>
                <span></span>
                <span>￥${result.data.price/2}拼团</span>
            </p>
        </div>`;
            let str2 = `
        <h3>授课师资</h3>
        <div class="clearfix">
            <img src="${"/uploads/avatar/"+result.data.head_photo_url}"></img>
            <p>
                <span>${result.data.realname}</span>
                <span>小U课堂高级讲师</span>
            </p>
            <span></span>
            <p>${result.data.teacherIntro}
            </p> 
        </div>`;
            $('#video_btn').html(str);
            $('#teacher').html(str2);
            //视频部分模板
            let str3 = '';
            for (let item of result.data.videoDetail) {
                str3 += `
                    <li onclick="videoPlay(${item.id})">
                        <span class="iconfont">&#xeb23;</span>
                        <span>第${item.vnum}节: ${item.video_title}</span>
                        <span>${result.data.courseIntro}</span>
                        <span>开播提醒</span>
                    </li>`
            }
            $('.catlogUl').html(str3);
            
        }
    }
    //点击免费报名
    async function baoming() {
        let data = {
            cid,
            mid: getMid(),
        }
        let result = await sendAjax({
            url: '/v1/member/study',
            type: 'post',
            data
        })
        console.log(result);
        if(result.code==300){
            alert(result.msg);
            return;
        }
        if (result.code == 200) {
            alert(result.msg);
        }
        if(result.code==208){
            alert('请登录后使用')
        }
    }
    //
    async function videoPlay(id) {
        
                let result = await sendAjax({
                    url: "/v1/list/videoplay/" + id
                })
                if (result.code == 200) {
                    console.log(result);
                    //渲染弹窗，弹窗中显示视频播放窗口
                    layer.open({
                        title: result.data[0].title,
                        area:['70%','90%'],
                        content: ` <!-- 播放器部分 -->
            <section class="play">
            <div class="play-header w1190 bc">
            <h3 class="title">
             ${result.data[0].video_title}
            </h3>
            </div>
            <div class="play-media w1190 bc">
            <div class="media-left">
                <div class="player">
                    <video width="100%" height='100%' autoplay loop controls src="${result.data[0].video_src}" id="src">

                    </video>
                </div>
                <div class="list">
                    <ul>     
                        <li>线路1</li>
                        <li>收藏</li>
                        <li>手机看</li>
                        <li>问题反馈</li>
                        <li>白天模式</li>
                        <li>倍速</li>
                    </ul>
                        </div>
                    </div>
                </div>
                </section>`
                    });
                } else {
                    layer.open({
                        title: '温馨提示',
                        content: '用户未登录，请登录',
                    })
                }
            }
</script>

</html>